<%--
  Created by IntelliJ IDEA.
  User: SuZePing
  Date: 2021/2/3
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<%@include file="/WEB-INF/include/include-head.jsp" %>
	<script type="text/javascript">
		$(function () {

			// 为向右添加的按钮绑定单击事件
			$("#toRightBtn").click(function () {
				// 找到[未分配角色列表]中选中的<option> -> 追加到[已分配角色列表]中
				$("select:eq(0) > option:selected").appendTo($("select:eq(1)"));
			});

			// 为向左添加的按钮绑定单击事件
			$("#toLeftBtn").click(function () {
				// 找到[已分配角色列表]中选中的<option> -> 追加到[未分配角色列表]中
				$("select:eq(1) > option:selected").appendTo($("select:eq(0)"));
			});

			// 提交时使已分配角色列表中的全部角色为选中状态，再进行提交
			$("#submitAssignAdminRoleBtn").click(function () {
				$("select:eq(1) > option").prop("selected",true);
			});

		});
	</script>
</head>
<body>
<%@include file="/WEB-INF/include/include-nav.jsp" %>
<div class="container-fluid">
	<div class="row">
		<%@include file="/WEB-INF/include/include-sidebar.jsp" %>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 id="title" class="panel-title"><i class="glyphicon glyphicon-th"></i> 分配权限</h3>
				</div>
				<div class="panel-body">
					<form action="assign/do/adminRole.html" method="post" role="form" class="form-inline">
						<input type="hidden" name="adminId" value="${param.adminId}">
						<input type="hidden" name="pageNum" value="${param.pageNum}">
						<input type="hidden" name="keyword" value="${param.keyword}">
						<div class="form-group">
							<label>未分配角色列表</label><br>
							<select class="form-control" multiple="multiple" size="10" style="width:100px;overflow-y:auto;">
								<c:forEach items="${requestScope.unassignedRoles}" var="unassignedRole">
									<option value="${unassignedRole.roleId}">${unassignedRole.roleName}</option>
								</c:forEach>
							</select>
						</div>
						<div class="form-group">
							<ul>
								<li id="toRightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
								<br>
								<li id="toLeftBtn" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
							</ul>
						</div>
						<div class="form-group" style="margin-left:40px;">
							<label>已分配角色列表</label><br>
							<select name="assignRoleIdList" class="form-control" multiple="multiple" size="10" style="width:100px;overflow-y:auto;">
								<c:forEach items="${requestScope.assignedRoles}" var="assignedRole">
									<option value="${assignedRole.roleId}">${assignedRole.roleName}</option>
								</c:forEach>
							</select>
						</div>
						<br><br>
						<button id="submitAssignAdminRoleBtn" type="submit" style="width: 150px;" class="btn btn-lg btn-success btn-block">提交</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>